import { useState, useCallback, useEffect } from 'react'
import { Select } from 'antd'
import axios from 'axios'
import './ExampleList1.css'
import BaseLayout from '../../layouts/BaseLayout/BaseLayout.jsx'
import CounterContext1 from './ExampleList1.context.js'

import ListTable from './ListTable.jsx'
import ListItemModal from './ListItemModal.jsx'
import SearchConiMod from './SearchConiMod.jsx'

const { Option } = Select;

//字典-性别
const sexDic = [{
	value: "1",
	text: "男",
},{
	value: "2",
	text: "女",
}];
const sexOptions = sexDic.map(d => <Option key={d.value}>{d.text}</Option>);


const ExampleList1 = () => {
	//编辑弹窗显隐
	const [ isModalVisible, setIsModalVisible ] = useState(false);
	//编辑时单个值
	const [ activeItemData, setActiveItemData ] = useState({});
	//列表数据
	const [ listdata, setListdata ] = useState([]);

	// 执行查询
	const searchList = useCallback(async () => {
		try {
			//const data = await axios.get('./user/queryUserList.do');
			const res = await axios.get('/moddata/user/queryUserList.json');
			setListdata(res.data.data);
		}  catch(e) {
			return e
		}
	}, []);
	//只会触发一次
	useEffect(() => {
		searchList();
	}, [searchList])
	
	return (
		<BaseLayout>
			<CounterContext1.Provider value={{ isModalVisible, setIsModalVisible, sexOptions, searchList, listdata, setListdata, activeItemData, setActiveItemData }}>
			    <div className='pageContainer view-ExampleList1'>
				    <SearchConiMod></SearchConiMod>
					<ListTable></ListTable>
					<ListItemModal></ListItemModal>
			    </div>				
			</CounterContext1.Provider>
		</BaseLayout>
	);
};

export default ExampleList1;
